<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:blut="http://github.com/blutorange"
	xmlns:xi="http://www.xima.de/taglib/xfc"
	xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="./template.xhtml">

	<ui:define name="monaco">
		<p:tabView id="tabs" dynamic="true">
			<p:tab id="tabDummy" title="Dummy">
				<p:outputPanel id="contentDummy">
					<p:commandButton actionListener="#{testBean.toggleRendered}"
						value="Click me"
						update="@form:tabs:contentDummy,@form:tabs:contentMonaco"
						process="@this" />
				</p:outputPanel>
			</p:tab>
			<p:tab id="tabMonaco" title="Monaco">
				<p:outputPanel id="contentMonaco">
					<script>log("Monaco updated")</script>
					<blut:monacoEditor widgetVar="monaco" id="monaco"
						value="#{testBean.code}" basename="simple.js"
						directory="blutorange/examples"
						editorOptions="#{testBean.editorOptions}"
						uiLanguage="#{testBean.uiLanguage}" height="400px" width="100%">
					</blut:monacoEditor>
				</p:outputPanel>
			</p:tab>
		</p:tabView>
	</ui:define>

	<ui:define name="script">
		<script>
			window.testCase = function() {
				log("Click on the 'monaco' tab.");
				log("The message 'Monaco updated' should be logged");
				log("The editor should be visible, and have height of about 400px.");
				log("Now click on the 'dummy' tab, then on the button 'click me'");
				log("The message 'Monaco updated' should be logged");
				log("Click on the 'monaco' tab again.");
				log("The editor should be visible again, and still have height of about 400px.");
				log("===");
			};
		</script>
	</ui:define>
</ui:composition>